import { formUI } from '@/comon/tools';
import { ComponentPropsType } from '@/components/editor';
import {
  formItem,
  formList,
  label,
  required,
  rules,
  useForm,
  valueName,
} from '@/hooks/useForm';
import { useEditorStore } from '@/store/editor';
import { Checkbox, Input, Select } from 'antd';
import { FC, useEffect } from 'react';
import { defaultProps, OptionItem } from './interface';
import Options from './Options';

const FormTitle: FC = () => {
  const { selectedComponentInfo, selectedId, updateSelected } =
    useEditorStore();
  const { props } = selectedComponentInfo || {};
  let options = props?.options || defaultProps.options || [];

  class Config {
    @label('标题内容')
    @formItem(<Input />)
    @rules(required('请输入标题内容'))
    title?: string;

    @label('options')
    @formList(<Options />)
    options?: OptionItem[];

    @label('默认选中')
    @formItem(<Select options={options} />)
    value?: string;

    @formItem(<Checkbox>竖向排列</Checkbox>)
    @valueName('checked')
    isVertical?: boolean = false;
  }

  const form = useForm({
    config: Config,
    onChange,
  });

  useEffect(() => {
    if (selectedComponentInfo?.props) {
      form.setFormData(selectedComponentInfo.props);
    }
  }, [selectedId]);

  function onChange(props: ComponentPropsType) {
    options = props.options || [];
    updateSelected({ props });
  }

  return formUI(form, selectedComponentInfo?.isLocked);
};

export default FormTitle;
